<template>
  <div id="rose-chart">
    <dv-charts :option="option" />
  </div>
</template>

<script>
import { commonMethod } from '@/api/mapper/index.js';
export default {
  name: 'RoseChart',
  data() {
    return {
      option: {}
    };
  },
  mounted() {
    const { createData } = this;
    setTimeout(() => {
      createData();
    }, 1000);
    setInterval(createData, 30000);
  },
  methods: {
    async  createData() {
      // const { randomExtend } = this;
      const getData = [];
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 484
      }).then(res => {
        res.data.map(o => {
          getData.push({
            name: o.JBYS_CJSSLY,
            value: Number(o.RATE.split('%')[0])
          });
        });
        console.log(getData);
      });

      this.option = {
        series: [
          {
            type: 'pie',
            radius: '70%',
            roseSort: false,
            data: getData,
            insideLabel: {
              show: false
            },
            outsideLabel: {
              formatter: '{name} {percent}%',
              labelLineEndLength: 20,
              style: {
                fill: '#fff'
              },
              labelLineStyle: {
                stroke: '#fff'
              }
            },
            roseType: true
          }
        ],
        color: ['#008ef0', '#ffb139', '#f82c00', '#016693', '#bfbfbf']
      };
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#rose-chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .rose-chart-title {
    height: 50px;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  .dv-charts-container {
    height: calc(20vh);
  }
}
</style>
